<template>
  <div class="header-section">
    <div class="city-selector">
      <apartment-outlined />
      <span>{{ currentCity }}</span>
    </div>

    <div class="year-selector">
      <a-date-picker
        :value="selectedYear"
        @update:value="$emit('update:selectedYear', $event)"
        picker="year"
        :input-readonly="true"
        :default-value="dayjs('2024')"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ApartmentOutlined } from '@ant-design/icons-vue'
import dayjs from 'dayjs'

defineProps<{
  currentCity: string
  selectedYear: any
}>()

defineEmits<{
  'update:selectedYear': [value: any]
}>()
</script>

<style scoped>
.header-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.city-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #333;
}

:deep(.anticon-apartment) {
  color: #1877e4;
}
</style> 